
<template>
  <div class="transportAdmin">
		<div class="searchBox">
      <el-form label-position="top" inline :model="searchForm" size="mini" style="max-height: 100px;">
        <el-form-item>
          <p slot="label" class="miniLabel">水站名称</p>
          <el-select v-model="searchForm.waterstation" placeholder="请选择水站名称">
            <p v-for="(item, index) of stationList" :key="index">
              <el-option :label="item" :value="item" se></el-option>
            </p>
          </el-select>
        </el-form-item>
        <el-form-item >
          <p slot="label" class="miniLabel">开始时间</p>
          <el-date-picker
            v-model="searchForm.starttime"
            placeholder="选择开始时间"
            :clearable="false"
            value-format="yyyy-MM-dd">
          </el-date-picker>

        </el-form-item>
        <el-form-item>
          <p slot="label" class="miniLabel">结束时间</p>
          <el-date-picker
            v-model="searchForm.lasttime"
            placeholder="选择结束时间"
            :clearable="false"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>

        <el-form-item >
          <p class="searchBtns">
            <el-button type="success" class="greenBtn" @click="submitSearch({pageSize: pageSize, pageNum: 1})">筛选</el-button>
						<el-button type="primary" class="greenBtn" size="mini" @click="added">新增</el-button>
            <el-button type="success" class="greenBtn" @click="exportExcel">导出表格</el-button>
          </p>

        </el-form-item>
        
      </el-form>
    </div>

		<div class="tableContent" v-loading="tableLoading">
      <el-table :data="tableList"  size="small"
        :header-cell-style="{color: '#666', backgroundColor: '#f6f6f6', borderBottom: 'none'}"
      >
        <el-table-column
          prop="numbering"
          label="编号"
          align="center">
        </el-table-column>
				<el-table-column
          prop="generationTime"
          label="产生时间"
          align="center">
        </el-table-column>
        <el-table-column
          prop="generateSite"
          label="产生废液站点"
          width="180"
          align="center">
        </el-table-column>
        <el-table-column
          prop="amount"
          label="产生量 / 桶"
          align="center">
        </el-table-column>
        <el-table-column
          prop="responsiblePerson"
          label="转运负责人"
          align="center">
        </el-table-column>
        <el-table-column
          prop="phone"
          label="联系电话"
          align="center">
        </el-table-column>
        <el-table-column
          prop="destination"
          label="转运目的地"
          align="center">
        </el-table-column>
        <el-table-column
          type="expand"
          label="照片"
          align="center">
          <template slot-scope="{ row }">
            <div v-if="row.imgList">
              <viewer :images="row.imgList">
                <img v-for="item of row.imgList" :key="item" :src="'http://47.112.16.168:' + item" class="imgItem">
              </viewer>
            </div>
            <div v-else>
              <p>暂无图片</p>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <myPaging :func="pageUpdate" :total="tableTotalPage" :pageSizes="[10, 50, 100]"></myPaging>
    </div>


		<el-dialog width="70%" :visible.sync="addedFormVisible" append-to-body>
      <div slot="title">
        <p>新增</p>
      </div>
      <el-form :model="addedForm" :rules="addedFormRules" size="mini" ref="addedForm" label-width="110px" style="width: 80%;margin: 0 auto;" v-loading="addedFormLoading">
        <el-row>
          <el-col :span="12">
            <el-form-item label="产生时间" prop="generationTime" style="padding-right: 15px;">
              <el-date-picker
                v-model="addedForm.generationTime"
                type="datetime"
                style="width: 100%"
                placeholder="选择产生时间"
                value-format="yyyy-MM-dd hh:mm:ss">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
						<el-form-item label="废液产生站点" prop="generateSite" >
              <el-select
                style="width: 100%"
                v-model="addedForm.generateSite"
                clearable
                placeholder="请选择废液产生站点">
                <el-option
                  v-for="item in stationList"
                  :key="item"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
				<el-row>
          <el-col :span="12">
            <el-form-item label="转运负责人" prop="responsiblePerson"  style="padding-right: 15px" >
              <el-input v-model="addedForm.responsiblePerson" placeholder="请填写转运负责人" disabled></el-input>
            </el-form-item>
          </el-col><el-col :span="12">
            <el-form-item label="联系电话" prop="phone" >
              <el-input v-model="addedForm.phone" placeholder="请填写负责人联系电话" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="产生量 / 桶" prop="amount" >
							<el-input-number v-model="addedForm.amount" :min="1"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="转运目的地" prop="destination" >
              <el-select
                style="width: 100%"
                v-model="addedForm.destination"
                clearable
                placeholder="请选择转运目的地">
                <el-option
                  v-for="item in userInfo.destination"
                  :key="item"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          
        </el-row>
        
				<el-row>
					<el-form-item label="照片" label-width="100px" prop="photoFiles">
						<el-upload
							ref="addUploadPhoto"
							action=""
							:file-list="addedForm.photoFiles"
							list-type="picture-card"
							multiple
							:limit="4"
              :on-change="uploadChange"
              :on-exceed="uploadExceed"
              :http-request="handleSubmit"
							:auto-upload="false"
						>
							<i class="el-icon-plus"></i>
						</el-upload>
					</el-form-item>	
				</el-row>  

        <el-form-item>
          <el-button type="primary" class="greenBtn" size="mini" @click="addedSubmit">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import common from '@/plugins/common'
import myPaging from '@/components/myPaging.vue'
export default {
	name: "transportAdmin",
	components: {
		myPaging
	},
	data() {
		return {
			searchForm: {
				waterstation: '',
        starttime: '',
        lasttime: '',
        isExcel: 'no',
			},
			tableLoading: false,
			addedFormVisible: false,
      addedFormLoading: false,
      addFormData: {},
			addedForm: {
        numbering: Date.now(),
        generationTime: "",
        generateSite: "",
        responsiblePerson: "",
        phone: "",
        amount: 1,
        destination: "",
        photoFiles: [],
      },
			addedFormRules: {
        generationTime: [
          { type: 'string', required: true, message: '请选择产生时间', trigger: 'blur' }
        ],
        generateSite: [
          { required: true, message: '请选择废物产生站点', trigger: 'change' }
        ],
        responsiblePerson: [
          { required: true, message: '请填写转运负责人', trigger: 'blur' },
        ],
        phone: [
          { required: true, message: '请填写联系电话', trigger: 'blur' },
        ],
        amount: [
          { required: true, message: '请输入产生量', trigger: 'blur' },
        ],
        destination: [
          { required: true, message: '请填写转运目的地', trigger: 'blur' },
        ],
        // photoFiles: [
        //   { required: true, message: '请选择照片', trigger: 'change' },
        // ],
      },

		}
	},
	computed: {
		...mapGetters({
      stationList: "getStationList",
      userInfo: "getUserInfo",
      tableList: "getTransportList",
      tableTotalPage: "getTransportTotalPage",
      //分页依赖
      pageSize: "getPageSize",
    }),
	},
	methods: {
    ...mapActions([
      "getTransportList",
      "insertTransportInput",
      "exportTransportExcel"
    ]),
		pageUpdate(option) {
      this.submitSearch(option)
		},
		async submitSearch(pageOption = {pageSize: this.pageSize, pageNum: 1}) {
			this.tableLoading = true

      await this.getTransportList({...this.searchForm, ...pageOption})

			this.tableLoading = false
		},
		added() {
      this.addedFormVisible = true
      this.addedForm.responsiblePerson = this.userInfo.user.username
      this.addedForm.phone = this.userInfo.user.phone
		},
		addedSubmit() {
      this.$refs['addedForm'].validate(async (valid) => {
        if(valid) {
          this.addedFormLoading = true
          this.addFormData = new FormData()
          let addedForm = this.addedForm
          this.$refs.addUploadPhoto.submit()
          for(let i in addedForm) {
            this.loopAppend(this.addFormData, i, addedForm[i])
          }
          let result = await this.insertTransportInput(this.addFormData)
          if(result.message !== 'success') {
            this.$notify({
              type: 'warning',
              title: '提示',
              message: result.info,
            })
          }else {
            this.$notify({
              type: 'success',
              title: '成功',
              message: result.info,
            })
            this.$refs['addedForm'].resetFields();
          }
          this.addedFormLoading = false
          this.addedFormVisible = false
          this.submitSearch()
        }else {
          return false;
        }
      })
    },
    uploadChange(file, fileList){
			this.addedForm.photoFiles = fileList
    },
    uploadExceed() {
			this.$notify.warning({
				title: '警告',
				message: '最多上传4张图片',
			})
    },
    handleSubmit(response) {
			this.addFormData.append('files', response.file)
    },
    loopAppend(formData, key, value) {
      formData.append(key, value)
    },
    async exportExcel() {
      await this.submitSearch()
      const message = this.$message({
        message: '正在导出数据, 请稍后',
        duration: 0
      });
      this.searchForm.isExcel = 'yes'
      await this.exportTransportExcel(this.searchForm)
      this.searchForm.isExcel = 'no'
      message.close()
    },
	},
	created() {
    this.searchForm.waterstation = this.stationList[0]
    this.searchForm.starttime = common.changeDateToString(new Date(new Date().getTime() - 2592000000))
    this.searchForm.lasttime = common.changeDateToString(new Date()) 
    this.submitSearch()
	}
}
</script>

<style scoped>
.transportAdmin {
  min-height: 100%;
}
.searchBox {
  padding: 20px 20px 0;
  margin-bottom: 20px;
  background-color: #fff;
}
.searchBox .miniLabel {
  line-height: 0;
}
.searchBtns {
  margin-top: 19px;
}
.tableContent {
  background-color: #fff;
  padding: 20px;
}
.imgItem {
  max-width: 200px;
  margin-right: 15px;
  cursor: pointer;
}
</style>